<template>
  <dv-border-box-10
    :style="{ '--right': right + 'px' }"
    backgroundColor="#00003bc1"
    :color="['#4789e3', '#65bfe5']"
    class="right-row-bg"
  >
    <div class="right-row-box">
      <!-- <dv-border-box-12 class="border-box">dv-border-box-13</dv-border-box-12> -->
      <!-- <div class="tolbar">
                <h4 style="text-align: center; margin: 0; font-size: 20px;">实时数据</h4>
            </div> -->
      <div class="content">
        <div class="tools">
          <dv-decoration-7 :dur="2" class="title"
            >&nbsp;<font size="5">分析</font>&nbsp;</dv-decoration-7
          >
          <div class="tool">
            <i class="el-icon-close" @click="removeFn"></i>
          </div>
        </div>
        <div class="box-content">
          <h3 class="title">基础分析</h3>
          <div class="card">
            <div class="card-item" @click="heatMap">
              <img src="../../assets/analysis/relitu.jpg" class="image" />
              <div>
                <p class="t">热力图</p>
                <p class="content">
                  热力图是一种通过对色块着色来显示数据的统计图表，可以用于查看总体的情况、发现异常值、显示多个变量之间的差异，以及检测它们之间是否存在任何相关性。
                </p>
                <p class="tips">openlayres 矢量热力图</p>
              </div>
            </div>
            <!-- <div class="card-item" @click="gssHeatMap">
              <img src="../../assets/analysis/relitu.jpg" class="image" />
              <div>
                <p class="t">热力图</p>
                <p class="content">
                  热力图是一种通过对色块着色来显示数据的统计图表，可以用于查看总体的情况、发现异常值、显示多个变量之间的差异，以及检测它们之间是否存在任何相关性。
                </p>
                <p class="tips">geoserver 栅格热力图</p>
              </div>
            </div> -->
            <div class="card-item" @click="loadFaultLines">
              <img src="../../assets/analysis/duancengxian.jpg" class="image" />
              <div>
                <p class="t">断层线</p>
                <p class="content">
                  地震断层,沿控制地震的先存断层上产生错动,其展布、产状和位移性质与活动断裂带相一致,成为活动断裂带的直接表现,一般7级以上地震都伴有明显的地震断层,个别6级以上(或震源较浅)的地震也出现有地震断层。
                </p>
                <p class="tips">openlayers 断层线</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
import MapTools from "@/utils/mapTools";
import { WKT } from "ol/format";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { Style, Stroke } from "ol/style";

import {getFaultLines} from '@/api'
export default {
  name: "Test1LeftRow",
  data() {
    return {
      right: -500,
      flag: "M6",
    };
  },
  props: {
    Map: {
      type: Object,
      requered: true,
    },
  },
  mounted() {},
  computed: {
    getMenuFlag() {
      return this.$store.state.activeMenu;
    },
  },
  watch: {
    getMenuFlag: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        this.right = -500;
        if (newValue === this.flag) {
          this.right = 0;
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    removeFn() {
      console.log("removeFn");
      this.right = -500;
    },
    heatMap() {
      let points = this.$store.state.points;
      let pointsArr = [];
      points.forEach((point) => {
        point.children.forEach((child) => {
          child.points.forEach((p) => {
            pointsArr.push(p);
          });
        });
      });

      let mapTools = new MapTools(this.Map);
      mapTools.createHeatmap(pointsArr);
      console.log("已创建");
    },
    gssHeatMap() {
      const mapTools = new MapTools(this.Map);
      mapTools.createGSSHeatmap();
    },
    async loadFaultLines() {
      const { data: res } = await getFaultLines();
      if (res.length == 0) return this.$message.error("断层线数据加载失败");

      let features = [];
      var format = new WKT();
      res.forEach((item) => {
        var ewkt = item.wkt.split(";");
        var wkt = ewkt[1];

        var feature = format.readFeature(wkt, {
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857",
        });

        feature.set("g_id", item.id)
        feature.set("g_type", "line")

        features.push(feature);
      });

      var layer = new VectorLayer({
        source: new VectorSource({
          features: features,
        }),
        style: new Style({
          stroke: new Stroke({
            color: "#c0c8cb",
            width: 2,
          }),
        }),
        isRemove: false,
        name: "断层线",
        type: "Layer",
        zIndex: 999,
        wrapX: false,
      });

      this.Map.addLayer(layer);

      let l = {
        title: layer.get("name"),
        name: layer.get("name"),
        uid: layer.ol_uid,
        id: new Date().getTime(),
        visible: layer.get("visible"),
        type: layer.get("type"),
        edit: false,
        delete: true,
        layer: layer,
        children: [],
      };

      let layeres = this.$store.getters.getLayeres;
      layeres.ul.push(l);
      this.$store.commit("setLayeres", layeres);
    },
  },
};
</script>

<style lang="less" scoped>
.right-row-bg {
  position: absolute;
  top: 0;
  right: var(--right);
  bottom: 0;
  width: 20%;
  margin: 5px;
  z-index: 9;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  animation: run 1s linear;
  color: #1dc1f5;
}

@keyframes run {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

.right-row-box {
  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  // color: #4789e3;
  // color: #3f96a5;

  .border-box {
    width: 95%;
    height: 150px;
  }

  // .tolbar {
  //     width: 100%;
  //     height: 5%;
  // }

  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
  .box-content {
    text-align: left;
    padding: 5px 10px;
  }

  .box-content {
    .title {
      text-align: left;
      margin: 10px 5px;
      padding-left: 5px;
      border-left: 5px #139fc0 solid;
    }
    .card {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: flex-start;

      .card-item {
        height: 100px;
        border-radius: 8px;
        margin-bottom: 10px;
        margin-left: 8px;
        background-color: #2f338a;
        transition: 0.3s linear;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;

        &:hover {
          scale: 1.05;
        }
        p {
          margin: 0;
          text-align: left;
          display: block;
        }
        .t {
          font-size: 20px;
          font-weight: bold;
        }
        .content {
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .tips {
          font-size: 12px;
          color: #999;
        }
        .time {
          font-size: 12px;
          color: #999;
        }
        .img {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          overflow: hidden;
        }
        .image {
          height: 80%;
          padding: 10px;
        }
      }
    }
  }
  .box-content:nth-child(1n) {
    flex: 2;
  }

  .box-content:nth-child(2n) {
    flex: 1;
  }
}

.tools {
  // display: flex;
  // flex-direction: row;
  // flex-wrap: nowrap;
  // justify-content: space-around;
  // align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 5px;

  .title {
    width: 100%;
    height: 30px;
  }

  .tool {
    position: absolute;
    right: 10px;
    top: 5px;
    background: #4687e240;
  }
}

.el-descriptions {
  background-color: transparent !important;
  color: #1dc1f5 !important;
  font-size: 18px;
}

.margin-left {
  margin-left: 10px;
}
</style>
